src/components/payment-route.tsx (1)

75-108: Improve key uniqueness and prep for i18n; optional memoization.

• Keys can collide if two items share type/provider/stage. Append index.
• Consider externalizing "Fee Breakdown", "Gas Fee", "Bridge Fee", "Platform Fee" for i18n.
• Optionally memoize the JSX to avoid recompute on each render.

Apply this minimal key fix:

-        {route.feeBreakdown.map((fee) => (
+        {route.feeBreakdown.map((fee, i) => (
           <div
-            key={`${fee.type}-${fee.provider}-${fee.stage}`}
+            key={`${fee.type}-${fee.provider}-${fee.stage}-${i}`}
             className="flex justify-between items-start text-xs"
           >

src/lib/types/index.ts (1)

12-23: Extract FeeBreakdownItem type and reuse for clarity and reuse.

Keeps PaymentRoute concise and improves ergonomics across the codebase.

Apply this change within the interface:

-  feeBreakdown?: {
-    type: "gas" | "crosschain" | "platform";
-    stage: "sending" | "overall";
-    provider: string;
-    amount: string;
-    amountFormatted: string;
-    amountInGwei?: string | null;
-    currency: string;
-    network: string;
-    rateProvider?: string;
-    receiverAddress?: string;
-  }[];
+  feeBreakdown?: FeeBreakdownItem[];

And add this type near the top of the file:

export type FeeBreakdownItem = {
  type: "gas" | "crosschain" | "platform";
  stage: "sending" | "overall";
  provider: string;
  amount: string;
  amountFormatted: string;
  amountInGwei?: string | null;
  currency: string;
  network: string;
  rateProvider?: string;
  receiverAddress?: string;
};

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/payment-route.tsx (1)

159-167: CRITICAL: Nested button breaks accessibility (unresolved from previous review).

The nested button issue flagged in the previous review remains unresolved. You still have a <button> element nested inside the PaymentRoute <button>, which violates HTML semantics and breaks keyboard navigation for screen reader users.

You claimed this was fixed, but the element is still a <button> instead of a <span> with proper ARIA attributes and keyboard handling.

Apply this diff to properly fix the accessibility issue:

-                      <button
-                        type="button"
+                      <span
+                        role="button"
+                        tabIndex={0}
                         aria-label="Show fee breakdown"
-                        className="text-zinc-400 hover:text-zinc-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-zinc-400 rounded"
+                        className="text-zinc-400 hover:text-zinc-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-zinc-400 rounded cursor-pointer"
-                        onClick={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }
+                        }}
                       >
                         <Info className="w-3 h-3" aria-hidden="true" />
-                      </button>
+                      </span>

src/components/payment-route.tsx (2)

72-104: Consider improving key uniqueness and amount formatting.

The formatFeeBreakdown function is well-structured, but consider these refinements:

1. Key uniqueness: The key ${fee.type}-${fee.provider}-${fee.stage} might not be unique if multiple fees share the same values. Consider adding an index or using a unique identifier if available.

2. Decimal precision: .toFixed(6) may show excessive precision for typical fee amounts. Consider using .toFixed(2) or a dynamic precision based on the amount magnitude.

3. Null safety: Add a guard for fee.amountInUSD to handle potential undefined values.

Apply this diff to improve the implementation:

-        {route.feeBreakdown.map((fee) => (
+        {route.feeBreakdown.map((fee, index) => (
           <div
-            key={`${fee.type}-${fee.provider}-${fee.stage}`}
+            key={`${fee.type}-${fee.provider}-${fee.stage}-${index}`}
             className="flex justify-between items-start text-xs"
           >
             <div className="flex-1">
               <div className="capitalize font-medium">
                 {fee.type === "gas"
                   ? "Gas Fee"
                   : fee.type === "crosschain"
                     ? "Crosschain Fee"
                     : "Platform Fee"}
               </div>
             </div>
             <div className="text-right ml-2">
               <div className="font-medium">
-                {Number(fee.amountInUSD).toFixed(6)} USD
+                {fee.amountInUSD != null ? Number(fee.amountInUSD).toFixed(2) : 'N/A'} USD
               </div>
             </div>
           </div>
         ))}

---

154-154: Simplify the optional chaining pattern.

The expression Number(route?.feeInUSD)?.toFixed(6) has redundant optional chaining. Number() always returns a number (or NaN for invalid input), never undefined, so the second ?. serves no purpose.

Consider this clearer approach:

-                  {Number(route?.feeInUSD)?.toFixed(6)} USD fee
+                  {(route.feeInUSD != null ? Number(route.feeInUSD).toFixed(2) : '0.00')} USD fee

This also reduces the decimal precision to 2 places, which is more appropriate for displaying USD amounts.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro